<template>
  <div class="me">
    <div class="avatar-box">
      <div class="avatar">
        <img :src="avatarUrl">
      </div>
    </div>
    <Mecell leftText="我的资料" :clickCell="navigateToUserInfo"/>
    <Mecell leftText="我参与的活动" :clickCell="navigateToJoinActivity"/>
    <Mecell leftText="我发起的活动" :clickCell="navigateToHoldActivity" v-if="userInfo.is_active_party"/>
    <Mecell leftText="我的收藏" :clickCell="navigateToKeepctivity" />
    <Mecell leftText="我的订单" :clickCell="navigateToOrder"/>
    <Mecell leftText="关于我们" :clickCell="navigateToAbout"/>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import Mecell from '../../components/mecell.vue'
export default {
  data() {
    return {
      articleList: [],
      avatarUrl: require('../../../static/images/touxiang.png'),
    };
  },
  components:{
    Mecell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  onShow(){
    this.checkLogin();
  },
  methods:{
    //跳转到我的资料
    navigateToUserInfo(){
      wx.navigateTo({
        url: '/pages/userInfo/main'
      })
    },
    //跳转到我参与的活动
    navigateToJoinActivity(){
      wx.navigateTo({
        url: '/pages/joinActivity/main'
      })
    },
    //跳转到我收藏的活动
    navigateToKeepctivity(){
      wx.navigateTo({
        url: '/pages/keep/main'
      })
    },
    //跳转到我的订单
    navigateToOrder(){
      wx.navigateTo({
        url: '/pages/order/main'
      })
    },
    //跳转到我发起的活动
    navigateToHoldActivity(){
      wx.navigateTo({
        url:'/pages/holdActivityList/main'
      })
    },
    //转换头像字符串对象
    parseAvatarUrl(){
      let rawData = JSON.parse(this.$store.state.WXuserInfo.rawData);
      this.avatarUrl = rawData.avatarUrl;
    },
    //跳转到关于我们页面
    navigateToAbout(){
      wx.navigateTo({
        url:'/pages/about/main'
      })
    },
    //检查是否登陆
    checkLogin(){
      var userToken = wx.getStorageSync('userToken');
      if(!userToken){
        wx.showToast({
          title: '请先授权登陆',
          icon: 'none',
          duration: 1000
        })
        setTimeout(()=>{
          wx.reLaunch({
            url: "/pages/login/main"
          })
        },1000)
      }else{
        //设置头像图片
        this.parseAvatarUrl()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .me
    width 100%
    height 100vh
    background-color #f1f1f1
    .avatar-box
      width 100%
      height 200rpx
      display flex
      justify-content center
      align-items center
      .avatar
        width 120rpx
        height 120rpx
        display flex
        justify-content center
        align-items center
        border-radius 50%
        background-color #dbdbdb
        img
          width 120rpx
          height 120rpx
          border-radius 50%
</style>